<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Selectors: Pseudo-class and Pseudo-element Selectors</title>
    <!--<link rel="stylesheet" href="../styles.css"/>-->
    <style>
        body {
            background-color: #fff;
            color: #333;
            font: 1.2em / 1.5 Helvetica Neue,
            Helvetica,
            Arial,
            sans-serif;
            padding: 1em;
            margin: 0;
        }

        * {
            box-sizing: border-box;
        }

        table {
            border-collapse: collapse;
            width: 300px;
        }

        td,
        th {
            padding: 0.2em;
            text-align: left;
        }
        /* xxxxxxxxxxxxxxxxxx */
        a:link {
            color: orange;
        }

        a:visited {
            color: green;
        }

        a:hover {
            text-decoration-line: none;
        }

        div:first-child {
            font-size: 150%;
            /*background-color: blue;*/
        }

        div.container::first-line {
            color: red;
        }
    </style>
</head>

<body>
<div class="container">
    <p>
        Veggies es <a href="#">bonus vobis</a>, proinde vos
        postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi
        tomatillo melon azuki bean garlic.
    </p>
    <p>
        Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot
        courgette tatsoi pea sprouts fava bean collard greens dandelion okra
        wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
    </p>
    <table>
        <tr>
            <th>Fruits</th>
            <th>Vegetables</th>
        </tr>
        <tr>
            <td>Apple</td>
            <td>Potato</td>
        </tr>
        <tr>
            <td>Orange</td>
            <td>Carrot</td>
        </tr>
        <tr>
            <td>Tomato</td>
            <td>Parsnip</td>
        </tr>
        <tr>
            <td>Kiwi</td>
            <td>Onion</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>Beet</td>
        </tr>
    </table>
</div>
</body>
</html>